<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>花无缺浏览器助手</title>
  <link rel="stylesheet" href="styles/popup.css">
</head>
<body>
  <div id="app">
    <div class="layout">
      <div class="sidebar">
        <div class="menu-item" :class="{active: showReceiveForm}" @click="showReceiveForm = true; show1688SyncForm = false">
          礼服单件收货
        </div>
        <div class="menu-item" :class="{active: show1688SyncForm}" @click="show1688SyncForm = true; showReceiveForm = false">
          1688产品同步
        </div>
      </div>
      <div class="content">
        <div v-if="showReceiveForm" class="form-container">
          <h3>礼服单件收货</h3>
          <div class="form-item">
            <label>箱唛号</label>
            <input v-model="formData.boxMarkNo" type="text" placeholder="请输入箱唛号">
          </div>
          <div class="form-item">
            <label>子订单号</label>
            <input v-model="formData.subOrderNo" type="text" placeholder="请输入子订单号">
          </div>
          <button @click="submitForm" class="submit-btn">提交</button>
        </div>
        <div v-if="show1688SyncForm" class="form-container">
          <h3>1688 产品信息同步</h3>
          <div class="form-item">
            <label>1688 产品 ID</label>
            <input v-model="syncData.productId" type="text" placeholder="请输入 1688 产品 ID">
          </div>
          <button @click="submitSyncForm" class="submit-btn">确认拉取</button>
        </div>
      </div>
    </div>
  </div>
  <script src="scripts/vue.js"></script>
  <!-- 使用运行时版本的Vue，不需要模板编译器 -->
  <script src="scripts/popup.js"></script>
</body>
</html>